<template>
    <div class="qilin-QilinView">
        <div class="header">基本使用</div>
        <QilinView v-model:viewConfig="viewConfig">
            <template v-slot:custom="slotData">
                <span>{{slotData.data.data}}内容随便写哦！</span>
            </template>
        </QilinView>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <br>
        <br>
        <div class="header">Exposes</div>
        <br>
        <br>
        <div class="header">Slots</div>
        <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable>
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinView v-model:viewConfig="viewConfig">
            <template v-slot:custom="slotData">
                <span>{{slotData.data.data}}内容随便写哦！</span>
            </template>
        </QilinView>
        // --js部分
        const viewConfig=reactive({
            globalConfig:{
                isTable:true,
                labelBackgroundColor:"#FAFAFA",
                labelColor:"rgba(0,0,0,0.85)",
                valueColor:"rgba(0,0,0,0.65)"
            },
            headerConfig:{
                hideHeader:false,
                headerText:""
            },
            itemConfig:[
                {
                    label:"姓名",
                    value:"name",
                    type:"text",
                    col:8
                },
                {
                    label:"简介",
                    value:"description",
                    type:"text",
                    valueEllipsis:true,
                    col:16
                },
                {
                    label:"Qilin官网作者Qilin组件作者生平",
                    value:"detail",
                    type:"text",
                    labelEllipsis:true,
                    col:24
                },
                {
                    label:"生辰",
                    value:"birthday",
                    type:"date",
                    format:"chinese",
                    col:12
                },
                {
                    label:"Qilin官网",
                    value:"qilinWeb",
                    type:"link",
                    valueStyle:"color:red !important;",
                    click:(item,value)=>{
                        console.log(item,value);
                        window.open(value);
                    },
                    col:12
                },
                {
                    label:"作者图片1",
                    value:"imageArrayString",
                    type:"image",
                    isImageArrayString:true,
                    imageFit:"fill",
                    col:12
                },
                {
                    label:"作者图片2",
                    value:"imageArrayObj",
                    type:"image",
                    isImageArrayString:false,
                    imageFit:"fill",
                    col:12
                },
                {
                    label:"作者图片3",
                    value:"imageArrayObj2",
                    type:"image",
                    isImageArrayString:false,
                    imageFit:"fill",
                    imageOptions:{
                        serverUrl:"name"
                    },
                    col:12
                },
                {
                    label:"作者微信",
                    value:"wechat",
                    type:"image",
                    isImageArrayString:true,
                    imageFit:"contain",
                    col:12
                },
                {
                    label:"作者文档1",
                    value:"fileArrayString",
                    type:"file",
                    isImageArrayString:true,
                    click:(item,value)=>{
                        console.log(item,value);
                    },
                    col:24
                },
                {
                    label:"作者文档2",
                    value:"fileArrayObj",
                    type:"file",
                    isImageArrayString:false,
                    click:(item,value)=>{
                        console.log(item,value);
                    },
                    col:24
                },
                {
                    label:"作者文档3",
                    value:"fileArrayObj2",
                    type:"file",
                    isImageArrayString:false,
                    imageOptions:{
                        serverOriginalName:"name"
                    },
                    click:(item,value)=>{
                        console.log(item,value);
                    },
                    col:24
                },
                {
                    label:"插槽",
                    value:"custom",
                    type:"slot",
                    slotName:"custom",
                    col:24
                },
                {
                    label:"作者介绍",
                    value:"detail",
                    type:"text",
                    textarea:true,
                    rows:3,
                    col:24
                }
            ],
            viewData:{
                name:"Qilin",
                description:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
                detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
                birthday:"1996-05-12",
                qilinWeb:"https://www.qilin-web.cn",
                imageArrayString:["https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"],
                imageArrayObj:[
                    {
                        fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                    }
                ],
                imageArrayObj2:[
                    {
                        name:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                    }
                ],
                wechat:[
                    new URL("@/assets/images/wechat.jpg",import.meta.url).href
                ],
                fileArrayString:["dhadadjasdjafjak.doc","dhadadjasdjafjak1.doc"],
                fileArrayObj:[
                    {
                        originalFilename:"dhadadjasdjafjak.doc"
                    }
                ],
                fileArrayObj2:[
                    {
                        name:"dhadadjasdjafjak.doc"
                    }
                ],
                custom:"作者的自定义插槽~",
                detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
            }
        });
    `
});


/*
    逻辑脚本代码区域
*/
const viewConfig=reactive({
    globalConfig:{
        isTable:true,
        labelBackgroundColor:"#FAFAFA",
        labelColor:"rgba(0,0,0,0.85)",
        valueColor:"rgba(0,0,0,0.65)"
    },
    headerConfig:{
        hideHeader:false,
        headerText:""
    },
    itemConfig:[
        {
            label:"姓名",
            value:"name",
            type:"text",
            col:8
        },
        {
            label:"简介",
            value:"description",
            type:"text",
            valueEllipsis:true,
            col:16
        },
        {
            label:"Qilin官网作者Qilin组件作者生平",
            value:"detail",
            type:"text",
            labelEllipsis:true,
            col:24
        },
        {
            label:"生辰",
            value:"birthday",
            type:"date",
            format:"chinese",
            col:12
        },
        {
            label:"Qilin官网",
            value:"qilinWeb",
            type:"link",
            valueStyle:"color:red !important;",
            click:(item,value)=>{
                console.log(item,value);
                window.open(value);
            },
            col:12
        },
        {
            label:"作者图片1",
            value:"imageArrayString",
            type:"image",
            isImageArrayString:true,
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片2",
            value:"imageArrayObj",
            type:"image",
            isImageArrayString:false,
            imageFit:"fill",
            col:12
        },
        {
            label:"作者图片3",
            value:"imageArrayObj2",
            type:"image",
            isImageArrayString:false,
            imageFit:"fill",
            imageOptions:{
                serverUrl:"name"
            },
            col:12
        },
        {
            label:"作者微信",
            value:"wechat",
            type:"image",
            isImageArrayString:true,
            imageFit:"contain",
            col:12
        },
        {
            label:"作者文档1",
            value:"fileArrayString",
            type:"file",
            isImageArrayString:true,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"作者文档2",
            value:"fileArrayObj",
            type:"file",
            isImageArrayString:false,
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"作者文档3",
            value:"fileArrayObj2",
            type:"file",
            isImageArrayString:false,
            imageOptions:{
                serverOriginalName:"name"
            },
            click:(item,value)=>{
                console.log(item,value);
            },
            col:24
        },
        {
            label:"插槽",
            value:"custom",
            type:"slot",
            slotName:"custom",
            col:24
        },
        {
            label:"作者介绍",
            value:"detail",
            type:"text",
            textarea:true,
            rows:3,
            col:24
        }
    ],
    viewData:{
        name:"Qilin",
        description:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
        birthday:"1996-05-12",
        qilinWeb:"https://www.qilin-web.cn",
        imageArrayString:["https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"],
        imageArrayObj:[
            {
                fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        imageArrayObj2:[
            {
                name:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ],
        wechat:[
            new URL("@/assets/images/wechat.jpg",import.meta.url).href
        ],
        fileArrayString:["dhadadjasdjafjak.doc","dhadadjasdjafjak1.doc"],
        fileArrayObj:[
            {
                originalFilename:"dhadadjasdjafjak.doc"
            }
        ],
        fileArrayObj2:[
            {
                name:"dhadadjasdjafjak.doc"
            }
        ],
        custom:"作者的自定义插槽~",
        detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
    }
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 0 && columnIndex === 0) ||
            //     (rowIndex === 5 && columnIndex === 0) ||
            //     (rowIndex === 8 && columnIndex === 0) ||
            //     (rowIndex === 8 && columnIndex === 0) ||
            //     (rowIndex === 31 && columnIndex === 0) ||
            //     (rowIndex === 35 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:200
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"globalConfig",
            attrType:"object",
            description:"查看组件全局的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"isTable",
                    attrType:"boolean",
                    description:"是否为表格形式",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"labelBackgroundColor",
                    attrType:"CssColor",
                    description:"label标签的背景颜色",
                    valuable:"-",
                    default:"#FAFAFA",
                },
                {
                    attrName:"labelColor",
                    attrType:"CssColor",
                    description:"label标签的字体颜色",
                    valuable:"-",
                    default:"rgba(0,0,0,0.85)",
                },
                {
                    attrName:"valueColor",
                    attrType:"CssColor",
                    description:"value所在元素的字体颜色",
                    valuable:"-",
                    default:"rgba(0,0,0,0.65)",
                },
                {
                    attrName:"borderColor",
                    attrType:"CssColor",
                    description:"表格边框颜色",
                    valuable:"-",
                    default:"#E9E9E9",
                },
            ]
        },
        {
            attrName:"headerConfig",
            attrType:"object",
            description:"头部标题部分的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"hideHeader",
                    attrType:"boolean",
                    description:"是否隐藏头部标题部分元素",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"headerText",
                    attrType:"string",
                    description:"头部标题内容",
                    valuable:"-",
                    default:"基本信息",
                },
            ]
        },
        {
            attrName:"itemConfig",
            attrType:"array",
            description:"每项的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"type",
                    attrType:"string",
                    description:"显示数据类型",
                    valuable:"'text' | 'date' | 'link' | 'image' | 'file' | 'color' | 'slot'",
                    default:"text",
                },
                {
                    attrName:"label",
                    attrType:"string",
                    description:"显示的label名称",
                    valuable:"-",
                    default:"默认label",
                },
                {
                    attrName:"value",
                    attrType:"string",
                    description:"对应数据字段名称，对应viewData",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"hideLabel",
                    attrType:"boolean",
                    description:"是否隐藏label字段",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"isHide",
                    attrType:"boolean",
                    description:"是否隐藏该项",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"isHideFn",
                    attrType:"function",
                    description:"是否隐藏该项的方法，优先级低于isHide",
                    valuable:"(item,value)=>{return true | false}",
                    default:"-",
                },
                {
                    attrName:"textarea",
                    attrType:"boolean",
                    description:"text类型是否是textarea，当且仅当type为text时生效",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"newLine",
                    attrType:"boolean",
                    description:"是否识别value值中的\\n换行符，当且仅当type为text时生效",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"rows",
                    attrType:"number",
                    description:"textarea时的高度，1对应40px，当textarea为true生效",
                    valuable:"-",
                    default:2,
                },
                {
                    attrName:"slotName",
                    attrType:"string",
                    description:"slot元素的插槽名name，当且仅当type为slot时生效",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"format",
                    attrType:"string",
                    description:"日期格式配置项，具体配置项请参考QilinUtils工具库中Date方法中的formatDate()方法，当且仅当type为date时生效",
                    valuable:"-",
                    default:"yyyy-MM-dd hh:mm:ss",
                },
                {
                    attrName:"col",
                    attrType:"number",
                    description:"栅栏格数",
                    valuable:"6 | 8 | 12 | 16 | 24",
                    default:8,
                },
                {
                    attrName:"className",
                    attrType:"string",
                    description:"额外添加在el-col元素上的类名",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"labelSuffix",
                    attrType:"string",
                    description:"label名称后缀符号",
                    valuable:"-",
                    default:"''",
                },
                {
                    attrName:"labelEllipsis",
                    attrType:"boolean",
                    description:"当label名称过长时是否设置悬浮提示",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"labelEllipsisPlacement",
                    attrType:"string",
                    description:"label名称过长时设置悬浮提示的位置",
                    valuable:"'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
                    default:"left",
                },
                {
                    attrName:"labelEllipsisEffect",
                    attrType:"string",
                    description:"当label名称过长时是否设置悬浮样式主题",
                    valuable:"'dark' | 'light'",
                    default:"dark",
                },
                {
                    attrName:"valueEllipsis",
                    attrType:"boolean",
                    description:"当value数据过长时是否设置悬浮提示",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"valueEllipsisPlacement",
                    attrType:"string",
                    description:"value数据过长时设置悬浮提示的位置",
                    valuable:"'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
                    default:"left",
                },
                {
                    attrName:"valueEllipsisEffect",
                    attrType:"string",
                    description:"当value数据过长时是否设置悬浮样式主题",
                    valuable:"'dark' | 'light'",
                    default:"dark",
                },
                {
                    attrName:"click",
                    attrType:"function",
                    description:"点击事件，当type为link或file时才生效",
                    valuable:"(item,value)=>{}",
                    default:"-",
                },
                {
                    attrName:"isImageArrayString",
                    attrType:"boolean",
                    description:"传入的图片或文件数据类型是字符串数组还是对象数组，默认为对象数组",
                    valuable:"true/false",
                    default:"false",
                },
                {
                    attrName:"imageFit",
                    attrType:"string",
                    description:"图片的适应类型",
                    valuable:"'' | 'contain' | 'fill' | 'cover' | 'none' | 'scale-down'",
                    default:"contain",
                },
                {
                    attrName:"imageIp",
                    attrType:"string",
                    description:"设置查看图片或文件的服务器ip",
                    valuable:"-",
                    default:"-",
                },
                {
                    attrName:"imageOptions",
                    attrType:"object",
                    description:"查看图片或文件时的设置配置项--仅当type=image/type=file且isImageArrayString为false时生效",
                    valuable:"-",
                    default:"-",
                    children:[
                        {
                            attrName:"serverOriginalName",
                            attrType:"string",
                            description:"原始文件名称，用以对应后台返回的字段名称",
                            valuable:"-",
                            default:"originalFileName",
                        },
                        {
                            attrName:"serverName",
                            attrType:"string",
                            description:"回显文件名称，用以对应后台返回的字段名称",
                            valuable:"-",
                            default:"newFileName",
                        },
                        {
                            attrName:"serverUrl",
                            attrType:"string",
                            description:"回显文件url，用以对应后台返回的字段名称",
                            valuable:"-",
                            default:"fileName",
                        },
                    ]
                },
            ]
        },
        {
            attrName:"viewData",
            attrType:"object",
            description:"回显数据的后台对应字段",
            valuable:"-",
            default:"-",
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const slotsTableConfig=reactive({
    elTableConfig:{
        border:true,
        stripe:true
    },
    headerConfig:[
        {
            label:"插槽名",
            prop:"slotName",
            type:"text",
            width:120
        },
        {
            label:"数据值",
            prop:"slotData",
            type:"text",
            width:180
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            slotName:"-",
            slotData:"data:{item,data}",
            description:"设置headerConfig配置项中的type为slot即可使用，用于需要对某项数据进行特殊处理的需求，其中设置的slotName属性值就是该插槽名"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
